<%@page import="com.shuang.common.JspProoertyParamsUtil"%>
<%@page import="java.util.List"%>
<%@page import="com.shuang.common.JspKVUtil"%>
<%@page import="com.shuang.common.JspJsonUtil"%>
<%@page import="com.google.gson.JsonParser"%>
<%@page import="com.shuang.pojo.ExtendDbGoods"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="com.google.gson.JsonArray"%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>${goodsInfo.gTitle}</title>
	<link rel="stylesheet" href="../css/commodity.css">
	<link rel="stylesheet" href="../css/demo.css">
	<link rel="stylesheet"  href="../css/component.css">
	<link rel="stylesheet" href="../css/content.css">
	
</head>
<body>
	<div class="wrap">
		<div class="logo">
		<!--头部-->
			<a href=""><img src="../images/dota2_logn.png" alt="恋尚优饰品交易中心"></a>
			<div class="login">
					<c:if test="${not empty userInfo }">
						<div class="user">
							<div class="user_img">
								<img src="../images/user.png" alt="" />
							</div>
							<div class="user_name" onmouseover="$('#user_name_none').css('display', 'block');"
								onmouseout="$('#user_name_none').css('display', 'none');">
								<a href="" id="user_name_a">
									<span>${userInfo. uName}</span> <b class="caret"></b>
								</a>
								<ul id="user_name_none">
									<li class="user_home"><a
										href="/index.php/home/User/my.html">个人主页</a></li>
									<li class="out_login"><a href="javascript:void(0)"
										id="quit" onclick="loginOut()">退出登录</a></li>
								</ul>
							</div>
						</div>
					</c:if>
					<c:if test="${ empty userInfo }">
					<!-- start -->
					<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
						<button type="button" id="login_b" class="login_box">登录</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-1">
									<span class="icon icon-close">×</span>
									<h2>会员登录</h2>
									<form action="" method="post" id="denglu">
										<p>
											<label>用户名：</label><input placeholder="请输入用户名" name="uName"
												id="login_name" type="text"><span></span>
										</p>
										<p>
											<label>密码：</label><input placeholder="请输入登录密码" name="uPwd"
												id="login_pass" value="" type="password"><span></span>
										</p>
										<p>
											<label>验证码：</label><input id="code" placeholder="请输入验证码"
												type="text"> <img src="../front/valiCodeImg/login"
												alt="验证码" id="code_img"
												onclick="this.src='../front/valiCodeImg/login?'+Math.random()"
												style="margin-left: 40px; width: 150px; height: 45px; cursor: pointer;"><span
												id="code_info"
												style="font-size: 15px; margin-left: 20px; color: red"></span>
										</p>
										<p>
											<input value="登录" id="login_t" class="login_btn"
												type="button">
										</p>
										<div>
											<a href="">忘记密码?</a>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<div
						class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
						<button type="button" id="login_b" class="register">注册</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-2">
									<span class="icon icon-close">×</span>
									<h2>会员注册</h2>
									<form id="zuce">
										<p>
											<label class="p1">用户名：</label> <input placeholder="请输入用户名"
												class="reg reg_name" name="uName" type="text"> <span>*请输入5到20位字符的账户</span>
										</p>

										<p>
											<label class="p1">密码：</label> <input placeholder="请输入密码"
												class="reg reg_pwd" name="uPwd" type="password"> <span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">确认密码：</label> <input placeholder="确认密码"
												class="reg reg_reUpwd" name="reuPwd" type="password">
											<span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">邮箱：</label> <input placeholder="请输入邮箱"
												class="reg reg_email" name="uEmail" type="text"> <span>*请输入正确的邮箱</span>
										</p>

										<p>
											<label class="p1">手机号码：</label> <input placeholder="请输入手机号码"
												class="reg reg_phone" name="uPhone" type="text"> <span>*请输入正确的手机号码以保证找回密码</span>
										</p>

										<!-- <p>
												<label class="p1">密钥：</label>
												<input placeholder="请输入密钥" class="reg" name="密钥" type="text">
												<span>*请输入5到20位字符密钥可以是数字、字母、一段话（用于密码找回，请牢记）</span>
											</p> -->

										<p>
											<label class="p1">验证码：</label> <input id="code"
												placeholder="请输入验证码" style="width: 180px" class="reg"
												name="code" type="text"> <img
												src="../front/valiCodeImg/register" alt="验证码"
												style="margin-left: 25px; cursor: pointer;"
												onclick="this.src='../front/valiCodeImg/register?'+Math.random()"
												id="reg_img"> <span class="reg_code"
												style="line-height: 45px"></span>
										</p>
										<p>
											<input value="提交注册" id="login_t" class="zuce_btn"
												type="button">
										</p>
									</form>
								</div>
							</div>
						</div>
					</div>
					</c:if>
				</div>
		</div>
		<!--头部end-->
		<div class="bodyer">
			<div class="container">
			<!--主体内容-->
			<div class="site">
			<!-- 位置 -->
				<div class="home_icon">
						<a href=""><img src="../images/home_icon.png" alt=""></a>
					</div>
					<div class="triangle"></div>
					<div class="site_sp">
						<a href="">饰品市场</a>
					</div>
					<div class="triangle1"></div>
					<div class="site_ss">
						饰品详情
					</div>
			<!-- 位置end -->
			</div>
			<div class="commodity_main">
				<div class="commodity">
				<!-- 商品详情 -->
					<div class="commodity_b">
						<div class="commodity_img">
							<div class="commodity_div" name="2"> </div>
							<img src=" ${goodsInfo.gMainImage}"  alt="${goodsInfo.gTitle}" >
						</div>
					</div>
					<div class="commodity_detail">
						<div class="detail_top">
							<div class="detail_name">
							<h4 title="${goodsInfo.gTitle}">${goodsInfo.gTitle}</h4>
							<div style="color: red;">${goodsInfo.gSellPoint}${goodsInfo.gSellPoint}</div>
							</div>
						</div>
						<div class="detail_mid">
						<table class="commodity_rarity" style="width: 100%;">
						<%
						Gson gson1=new Gson();
						JsonParser parser1 = new JsonParser();
						JsonArray Jarray1 = parser1.parse(((ExtendDbGoods)request.getAttribute("goodsInfo")).getPropertyData()).getAsJsonArray();
						%>
						
						<%
								for(int i=0;i<Jarray1.size();i++){
									JspProoertyParamsUtil prooertyParams= gson1.fromJson(Jarray1.get(i), JspProoertyParamsUtil.class);
									%>
									
									<tr>
									<td><%=prooertyParams.getProperty() %>：</td>
									<td>
									<%
									String[] strArray=prooertyParams.getParams().split(",");
									for(int j=0;j<strArray.length;j++){
										%>
										<span><%=strArray[j] %></span>
										<%
									}
									%>
									</td>
									</tr>
									<%
								}
						%>
							
							<tr>
								<td>饰品单价：</td>
								<td><div class="detail_price">${goodsInfo.gPrice/100}&nbsp;元</div></td>
							</tr>
						</table>
						</div>
						<div class="detail_bottom">
							<div class="sl">数量：</div>
							<div class="detail_num">
								<div class="minus">-</div>
								<input value="1" id="detail_nums" onkeyup="this.value=this.value.replace(/\D/g,'')" type="text">
								<div class="add">+</div>
							</div>
							<div class="kc" name="1">(库存：<span id="kc_nums">${goodsInfo.gnum }</span>件)</div>
						</div>
						<div class="btn_hid">
							<div class="detail_gm">立即购买</div>
							<div class="detail_gwc" data-reveal-id="myModal">加入购物车</div>
						</div>
					</div>
				<!-- 商品详情end -->
				</div>
				<div class="commodity_hot">
				<!-- 热销产品 -->
					<div class="commodity_hot_bar">
						<div>
							<img src="../images/sign.png" alt="">
							<span>热销产品</span>
						</div>
					</div>
					<div class="commodity_hot_detail">
											<!-- <div class="shop_hot_item">
							<div class="item_img">
								<a href=""><img src="../images/thimb.png" alt=""></a>
								<span class="bx">罕见</span>
							</div>
							<div class="shop_hot_dota">
								<div class="shop_hot_dota1">
									<div class="shop_hot_title">
										<a href=""><span class="hot_title1">无常君王披风</span></a>
										<img src="../images/Dota-1.png" alt="">
									</div>
								</div>
								<div class="shop_hot_dota2">
									<div class="shop_hot_sj">
										售价：<span>1,650</span>
									</div>
									<div class="shop_hot_sc">
										销量：3&nbsp;件
									</div>
								</div>
							</div>
						</div> -->
											</div>
				<!-- 热销产品end		 -->
				</div>
				<div class="commodity_news">
				<!-- 新品推荐 -->
					<div class="commodity_news_bar">
						<ul class="commodity_news_bar_ul">
							<!--这里用ajax就好-->
							<!-- <li><span class="commodity_news_list_show">新品推荐</span></li> -->
							<li><span class="show_more">商品详情</span></li>
							<li><span class="pinglun_show">用户评论</span></li>
							
						</ul>
					</div>
					<div class="goods" style="margin:10px 0px;background: white;overflow: hidden;">
					<%
					Gson gson=new Gson();
					JsonParser parser = new JsonParser();
					JsonArray Jarray = parser.parse(((ExtendDbGoods)request.getAttribute("goodsInfo")).getFormatData()).getAsJsonArray();
					
					%>
					<table border='1' cellspacing="0" cellpadding="0"  bgcolor="#2E3238"  bordercolor="black" style="width: 100%;text-align: center;border: 10px solid black;color: white; ">
						<%
						for(int i=0;i<Jarray.size();i++){
							%>
								<tr>
								<th colspan="2" ><%=gson.fromJson(Jarray.get(i),JspJsonUtil.class).getGroup()%></th>
								</tr>
							<%
							JspKVUtil[]	formatparams=gson.fromJson(Jarray.get(i),JspJsonUtil.class).getParams();
							for(int j=0;j<formatparams.length;j++){
								%>
								<tr>
								<td><%=formatparams[j].getK() %></td>
								<td><%=formatparams[j].getV() %></td>
								</tr>
								<%
							}
						}
						%>
					</table>
						${goodsInfo.describeData}
					</div>
					<div class="pinglun" style="display: none">
						<ul>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
							<li>xxxxxxxxx</li>
						</ul>
						<div class="rec_bg" style="margin: 10px 20px; border: 2px black solid; text-align: center;"><a style="color: gray;">>>>更多</a></div>
					</div>
					

				<!-- 新品推荐end -->
				</div>
			</div>
			<!--主题内容end-->
			</div>
			<!-- boyder end -->
		</div>
		<div class="footer">
			<div class="footer_container">
				<p>
					<a href="index.html">首页</a><b>|</b>
					<a href="">关于我们</a><b>|</b>
					<a href="">意见反馈</a><b>|</b>
					<a href="">商务合作</a>
				</p>
			</div>
		</div>
		<div class="nav">
			<div class="shopper">
				<a href="shopping">
					<span><img src="../images/shopper.png" alt=""></span>
					<div class="shopper_gw">购物车</div>
				</a>
					<div class="shopper_nums"></div>
				
				<!-- <a href="" id="shopper_bb_a">
					<div class="shopper_bb">我的背包</div>
				</a> -->
				<div class="shopper_most">
					<img src="../images/top.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.js"></script>
	<script src="../js/modernizr.js"></script>
	<script src="../js/classie.js"></script>
	<script src="../js/uiMorphingButton_fixed.js"></script>
	<script src="../js/login.js"></script>
	<script src="../js/loginregister.js"></script>
<script>


	$(".detail_num .add").click(function(){
		var num=parseInt($("#detail_nums").val());
		if(num<parseInt($("#kc_nums").html())){
			num=num+1;
			$("#detail_nums").val(num);
		}
	});
	$(".detail_num .minus").click(function(){
		var num=parseInt($("#detail_nums").val());
		if(num>1){
			num=num-1;
			$("#detail_nums").val(num);
		}
	});
	$(".commodity_news_bar_ul li .pinglun_show").click(function () {
		$(".pinglun").show();
		$(".goods").hide();
	})
	$(".commodity_news_bar_ul li .show_more").click(function () {
		$(".pinglun").hide();
		$(".goods").show();
	})
	$(".commodity_rarity span").click(function(){
		$(".detail_mid").css("border" ,"0px solid black" );
		var num=0;
		$(this).parent().find("span").each(function(){
			$(this).css("border" ,"2px solid black" );
			$(this).removeClass("selectIt");
		});
		$(this).addClass("selectIt");
		$(this).css("border" ,"2px solid #f45719" );
	});
	var uid=${userInfo.uId }+""; //获取用户的id
	var gid=${goodsInfo.gId};//商品id
	var gTitle="${goodsInfo.gTitle}";//商品标题
	var gMainImage="${goodsInfo.gMainImage}";
	var gPrice=${goodsInfo.gPrice};
	//点击购买
	$(".btn_hid .detail_gm").click(function(){
		var trs=$(".detail_mid .commodity_rarity").find("tr");
		var property=checkShoppingProperty(trs);//商品的属性信息
		if(trs.length>1&&property==""){
			return ;
		}
		//创建商品对象
		var shopping= new Object(); 
		shopping.gId=gid;
		shopping.gTitle=gTitle;
		shopping.gMainImage=gMainImage;
		shopping.gPrice=gPrice;
		shopping.s_number=$("#detail_nums").val();
		shopping.s_property_data=property+"*"+$("#detail_nums").val();
		var cookies=document.cookie;
		if(cookies.indexOf("SHOPPING_LIST")==-1){
			//decodeURI()解码encodeURIComponent()编码
			document.cookie="SHOPPING_LIST="+encodeURIComponent("["+JSON.stringify(shopping)+"]")+";"+'path=/';
			$(".shopper_nums").html(1);
		}else{
			//获取cookie中的原有数据
			var cookieShopping=JSON.parse(getCookieJsonData("SHOPPING_LIST"));
			 for(var i=0,j=cookieShopping.length;i<j;i++){
				if(cookieShopping[i].gId==gid){//证明购物车已经存在该商品
					cookieShopping[i].s_number=parseInt(cookieShopping[i].s_number)+parseInt($("#detail_nums").val());//修改数量
					cookieShopping[i].s_property_data=cookieShopping[i].s_property_data+","+property+"*"+$("#detail_nums").val();//添加属性信息
					document.cookie="SHOPPING_LIST="+encodeURIComponent(JSON.stringify(cookieShopping))+";"+'path=/';
					location.href="shopping";
					return;
				}
			}
			cookieShopping.push(shopping);
			document.cookie="SHOPPING_LIST="+encodeURIComponent(JSON.stringify(cookieShopping))+";"+'path=/';
			$(".shopper_nums").html(parseInt($(".shopper_nums").html())+1); 
		}
		location.href="shopping";
	});

	//加入购物车
	$(".btn_hid .detail_gwc").click(function(){
		
		var trs=$(".detail_mid .commodity_rarity").find("tr");
		var property=checkShoppingProperty(trs);
		//  选择好了属性信息，可以把信息加入cookie
		if(trs.length>1&&property==""){
			return ;
		}
		//创建商品对象
		var shopping= new Object(); 
		shopping.gId=gid;
		shopping.gTitle=gTitle;
		shopping.gMainImage=gMainImage;
		shopping.gPrice=gPrice;
		shopping.s_number=$("#detail_nums").val();
		shopping.s_property_data=property+"*"+$("#detail_nums").val();
		var cookies=document.cookie;
		if(cookies.indexOf("SHOPPING_LIST")==-1){
			//decodeURI()解码encodeURIComponent()编码
			document.cookie="SHOPPING_LIST="+encodeURIComponent("["+JSON.stringify(shopping)+"]")+";"+'path=/';
			$(".shopper_nums").html(1);
		}else{
			//获取cookie中的原有数据
			var cookieShopping=JSON.parse(getCookieJsonData("SHOPPING_LIST"));
			 for(var i=0,j=cookieShopping.length;i<j;i++){
				if(cookieShopping[i].gId==gid){//证明购物车已经存在该商品
					cookieShopping[i].s_number=parseInt(cookieShopping[i].s_number)+parseInt($("#detail_nums").val());//修改数量
					cookieShopping[i].s_property_data=cookieShopping[i].s_property_data+","+property+"*"+$("#detail_nums").val(); //添加属性信息
					document.cookie="SHOPPING_LIST="+encodeURIComponent(JSON.stringify(cookieShopping))+";"+'path=/';
					alert("加入成功");
					return;
				}
			}
			cookieShopping.push(shopping);
			document.cookie="SHOPPING_LIST="+encodeURIComponent(JSON.stringify(cookieShopping))+";"+'path=/';
			$(".shopper_nums").html(parseInt($(".shopper_nums").html())+1); 
		}
		alert("加入成功");
	});
	
	//查询商品属性是否选择
	function checkShoppingProperty(trs){
		var property="[";//商品的属性信息
		trs.each(function(index,element){
			if(index!=trs.length-1){
				$(this).find("td").each(function(index1,element1){
					if(index1==0){
						//property+=$(this).html();
					}else{
						var propertyParam="";
						$(this).find("span").each(function(index2,element2){
							if($(this).hasClass("selectIt")){
								propertyParam=$(this).html();
							}
						});
						if(propertyParam==""){
							$(".detail_mid").css("border" ,"1px solid red" );
							alert("请选择属性");
							property="";
							return ;
						}
						property+=propertyParam;
					}
				});
				
			}
		});
		if(property!=""){
			property+="]";
		}
		
		return property;
	}
</script>
</body></html>